import React, { useState } from 'react';
import MainLayout from '@/components/layout/MainLayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faHeart,
  faComment,
  faShare,
  faBookmark,
  faEllipsisVertical,
  faPaperPlane,
  faPenToSquare,
  faBell,
  faSearch,
  faUsers,
  faUserPlus,
  faImage,
  faCameraAlt,
  faLocationDot,
  faSmile
} from '@fortawesome/free-solid-svg-icons';

export default function Community() {
  const [activeTab, setActiveTab] = useState('全部');
  const [postContent, setPostContent] = useState('');

  // 模拟的帖子数据
  const posts = [
    {
      id: 1,
      user: {
        id: 101,
        name: '张健康',
        avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200'
      },
      content: '今天完成了5公里跑步训练，感觉状态越来越好了！#跑步 #健康生活',
      image: 'https://images.unsplash.com/photo-1461897104016-0b3b00cc81ee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400',
      likes: 56,
      comments: 12,
      shares: 3,
      timestamp: '10分钟前',
      tags: ['跑步', '健康生活'],
      isLiked: true,
      isSaved: false
    },
    {
      id: 2,
      user: {
        id: 102,
        name: '李营养师',
        avatar: 'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200'
      },
      content: '今天来聊聊高蛋白低脂饮食的重要性。合理的饮食搭配对于身体健康和体重管理至关重要。#营养 #饮食健康',
      likes: 89,
      comments: 34,
      shares: 15,
      timestamp: '2小时前',
      tags: ['营养', '饮食健康'],
      isLiked: false,
      isSaved: true
    },
    {
      id: 3,
      user: {
        id: 103,
        name: '王医生',
        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200'
      },
      content: '心脏健康小贴士：每天30分钟有氧运动能显著降低心血管疾病风险。今天来分享一些适合各年龄段的心脏保健方法。#心脏健康 #医疗建议',
      image: 'https://images.unsplash.com/photo-1530549387789-4c1017266635?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400',
      likes: 142,
      comments: 28,
      shares: 47,
      timestamp: '6小时前',
      tags: ['心脏健康', '医疗建议'],
      isLiked: true,
      isSaved: true
    },
    {
      id: 4,
      user: {
        id: 104,
        name: '赵瑜伽',
        avatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200'
      },
      content: '冥想和瑜伽的结合能帮助你更好地管理压力和焦虑。今天分享一组适合初学者的瑜伽动作，只需要10分钟即可完成。#瑜伽 #减压 #心理健康',
      image: 'https://images.unsplash.com/photo-1494859802809-d069c3b71a8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800',
      likes: 215,
      comments: 42,
      shares: 79,
      timestamp: '昨天',
      tags: ['瑜伽', '减压', '心理健康'],
      isLiked: false,
      isSaved: false
    }
  ];

  // 模拟的热门话题
  const hotTopics = [
    { id: 1, name: '减脂30天挑战', posts: 1245 },
    { id: 2, name: '健康早餐', posts: 983 },
    { id: 3, name: '家庭健身', posts: 784 },
    { id: 4, name: '跑步技巧', posts: 567 },
    { id: 5, name: '睡眠优化', posts: 432 }
  ];

  // 模拟的推荐关注
  const suggestedFollows = [
    { 
      id: 201, 
      name: '张医生', 
      avatar: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200', 
      profession: '心脏专家',
      followers: 12500
    },
    { 
      id: 202, 
      name: '李教练', 
      avatar: 'https://images.unsplash.com/photo-1548372290-8d01b6c8e78c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200', 
      profession: '健身教练',
      followers: 8300
    },
    { 
      id: 203, 
      name: '王营养师', 
      avatar: 'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200', 
      profession: '注册营养师',
      followers: 5600
    }
  ];

  const tabs = ['全部', '关注', '热门', '健康', '饮食', '运动', '心理'];

  const handlePostSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    alert(`发布内容: ${postContent}`);
    setPostContent('');
  };

  return (
    <MainLayout title="HealthHub - 社区">
      {/* 顶部状态栏 */}
      <div className="bg-primary text-white p-4 flex justify-between items-center">
        <div className="flex items-center">
          <span className="font-bold text-xl">健康社区</span>
        </div>
        <div className="flex items-center space-x-3">
          <FontAwesomeIcon icon={faSearch} />
          <FontAwesomeIcon icon={faBell} />
          <div className="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
            <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100" 
                 alt="用户头像" className="w-full h-full object-cover" />
          </div>
        </div>
      </div>

      {/* 内容区域 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 p-4">
        {/* 主内容区 - 帖子列表 */}
        <div className="md:col-span-3">
          {/* 标签导航 */}
          <div className="mb-4 overflow-x-auto">
            <div className="flex space-x-2 pb-2">
              {tabs.map(tab => (
                <button
                  key={tab}
                  className={`px-4 py-2 rounded-full whitespace-nowrap ${
                    activeTab === tab 
                      ? 'bg-primary text-white' 
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                  onClick={() => setActiveTab(tab)}
                >
                  {tab}
                </button>
              ))}
            </div>
          </div>

          {/* 发帖区域 */}
          <div className="bg-white rounded-lg shadow-sm mb-4 p-4">
            <div className="flex items-start space-x-3">
              <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100" 
                     alt="用户头像" className="w-full h-full object-cover" />
              </div>
              <form className="flex-1" onSubmit={handlePostSubmit}>
                <div className="border border-gray-200 rounded-lg mb-2">
                  <textarea
                    value={postContent}
                    onChange={(e) => setPostContent(e.target.value)}
                    className="w-full p-3 rounded-lg resize-none outline-none"
                    placeholder="分享你的健康心得..."
                    rows={3}
                  ></textarea>
                </div>
                <div className="flex justify-between items-center">
                  <div className="flex space-x-3 text-gray-500">
                    <button type="button" className="flex items-center space-x-1 hover:text-primary">
                      <FontAwesomeIcon icon={faImage} />
                      <span className="text-sm">图片</span>
                    </button>
                    <button type="button" className="flex items-center space-x-1 hover:text-primary">
                      <FontAwesomeIcon icon={faLocationDot} />
                      <span className="text-sm">位置</span>
                    </button>
                    <button type="button" className="flex items-center space-x-1 hover:text-primary">
                      <FontAwesomeIcon icon={faSmile} />
                      <span className="text-sm">表情</span>
                    </button>
                  </div>
                  <button
                    type="submit"
                    className="bg-primary text-white px-4 py-2 rounded-full hover:bg-primary-dark disabled:opacity-50"
                    disabled={!postContent.trim()}
                  >
                    发布
                  </button>
                </div>
              </form>
            </div>
          </div>

          {/* 帖子列表 */}
          <div className="space-y-4">
            {posts.map(post => (
              <div key={post.id} className="bg-white rounded-lg shadow-sm overflow-hidden">
                {/* 帖子头部 */}
                <div className="p-4">
                  <div className="flex justify-between">
                    <div className="flex space-x-3">
                      <div className="w-10 h-10 rounded-full overflow-hidden">
                        <img 
                          src={post.user.avatar} 
                          alt={post.user.name} 
                          className="w-full h-full object-cover" 
                        />
                      </div>
                      <div>
                        <h3 className="font-medium">{post.user.name}</h3>
                        <p className="text-xs text-gray-500">{post.timestamp}</p>
                      </div>
                    </div>
                    <button className="text-gray-500 hover:text-gray-700">
                      <FontAwesomeIcon icon={faEllipsisVertical} />
                    </button>
                  </div>
                  
                  {/* 帖子内容 */}
                  <div className="mt-3">
                    <p className="text-gray-700 whitespace-pre-line">{post.content}</p>
                    <div className="flex flex-wrap mt-2">
                      {post.tags?.map(tag => (
                        <span key={tag} className="mr-2 mb-2 text-primary text-sm">
                          #{tag}
                        </span>
                      ))}
                    </div>
                  </div>
                  
                  {/* 帖子图片 */}
                  {post.image && (
                    <div className="mt-3 rounded-lg overflow-hidden">
                      <img 
                        src={post.image} 
                        alt="帖子图片" 
                        className="w-full object-cover" 
                      />
                    </div>
                  )}
                  
                  {/* 帖子互动 */}
                  <div className="mt-4 flex justify-between">
                    <button className={`flex items-center space-x-1 ${post.isLiked ? 'text-red-500' : 'text-gray-500'}`}>
                      <FontAwesomeIcon icon={faHeart} />
                      <span>{post.likes}</span>
                    </button>
                    <button className="flex items-center space-x-1 text-gray-500">
                      <FontAwesomeIcon icon={faComment} />
                      <span>{post.comments}</span>
                    </button>
                    <button className="flex items-center space-x-1 text-gray-500">
                      <FontAwesomeIcon icon={faShare} />
                      <span>{post.shares}</span>
                    </button>
                    <button className={`flex items-center space-x-1 ${post.isSaved ? 'text-blue-500' : 'text-gray-500'}`}>
                      <FontAwesomeIcon icon={faBookmark} />
                    </button>
                  </div>
                </div>
                
                {/* 评论输入区域 */}
                <div className="px-4 py-3 border-t border-gray-100 flex items-center space-x-3">
                  <div className="w-8 h-8 rounded-full overflow-hidden">
                    <img 
                      src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100" 
                      alt="用户头像" 
                      className="w-full h-full object-cover" 
                    />
                  </div>
                  <div className="flex-1 flex items-center border border-gray-200 rounded-full px-3 py-1">
                    <input 
                      type="text" 
                      placeholder="添加评论..."
                      className="flex-1 text-sm outline-none"
                    />
                    <button className="text-primary">
                      <FontAwesomeIcon icon={faPaperPlane} />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        
        {/* 侧边栏 */}
        <div className="hidden md:block space-y-4">
          {/* 热门话题 */}
          <div className="bg-white rounded-lg shadow-sm p-4">
            <h2 className="font-semibold text-lg mb-3">热门话题</h2>
            <div className="space-y-3">
              {hotTopics.map(topic => (
                <div key={topic.id} className="flex justify-between items-center hover:bg-gray-50 p-2 rounded-md cursor-pointer">
                  <span>#{topic.name}</span>
                  <span className="text-xs text-gray-500">{topic.posts}篇</span>
                </div>
              ))}
            </div>
            <button className="w-full text-primary text-sm mt-3">
              查看更多
            </button>
          </div>
          
          {/* 推荐关注 */}
          <div className="bg-white rounded-lg shadow-sm p-4">
            <div className="flex justify-between items-center mb-3">
              <h2 className="font-semibold text-lg">推荐关注</h2>
              <FontAwesomeIcon icon={faUsers} className="text-primary" />
            </div>
            <div className="space-y-4">
              {suggestedFollows.map(user => (
                <div key={user.id} className="flex items-center justify-between">
                  <div className="flex items-center space-x-3">
                    <div className="w-10 h-10 rounded-full overflow-hidden">
                      <img 
                        src={user.avatar} 
                        alt={user.name} 
                        className="w-full h-full object-cover" 
                      />
                    </div>
                    <div>
                      <h3 className="font-medium">{user.name}</h3>
                      <p className="text-xs text-gray-500">{user.profession} · {user.followers.toLocaleString()}关注</p>
                    </div>
                  </div>
                  <button className="text-primary hover:text-primary-dark">
                    <FontAwesomeIcon icon={faUserPlus} />
                  </button>
                </div>
              ))}
            </div>
            <button className="w-full text-primary text-sm mt-4">
              查看更多
            </button>
          </div>
          
          {/* 页脚 */}
          <div className="text-xs text-gray-400 space-y-2">
            <div className="flex flex-wrap">
              <span className="mr-2 mb-1">关于我们</span>
              <span className="mr-2 mb-1">使用条款</span>
              <span className="mr-2 mb-1">隐私政策</span>
              <span className="mr-2 mb-1">联系我们</span>
              <span className="mr-2 mb-1">帮助中心</span>
            </div>
            <p>© 2024 HealthHub健康平台 版权所有</p>
          </div>
        </div>
      </div>
    </MainLayout>
  );
} 